<template name="onboarding">
    <div class="ui {{#if isOnMobile}}container-fluid{{else}}container{{/if}}"
    style="{{#if isOnMobile}}margin: 15px{{/if}}">
        <div class="ui message">
            <i class="close icon"></i>
            <div class="header">
                <i class="clock icon"></i>
                {{translate "ONBOARDING_TIME_LIMIT"}}
            </div>
            <p>{{translate "ONBOARDING_TIME_LIMIT_DESC" activeUsernameSteem}}</p>
        </div>
        <h2 class="ui header">{{ translate "ONBOARDING_TITLE" }}</h2>
        <div class="ui fluid small ordered steps">
            <div class="active step" id="step1d">
              <div class="content">
                <div class="title">{{ translate "ONBOARDING_STEP1" }}</div>
                <div class="description">{{ translate "ONBOARDING_STEP1B" }}</div>
              </div>
            </div>
            <div class="step" id="step2d">
              <div class="content">
                <div class="title">{{ translate "ONBOARDING_STEP2" }}</div>
                <div class="description">{{ translate "ONBOARDING_STEP2B" }}</div>
              </div>
            </div>
            <div class="step" id="step3d">
              <div class="content">
                <div class="title">{{ translate "ONBOARDING_STEP3" }}</div>
                <div class="description">{{ translate "ONBOARDING_STEP3B" }}</div>
              </div>
            </div>
        </div>

        <section id="step1">
            <p>{{ translate "ONBOARDING_STEP1_TITLE" }}</p>            
            {{>keypair}}
            <br /><br />
            <div class="ui checkbox">
                <input type="checkbox" name="example">
                <label>{{ translate "ONBOARDING_STEP1_CHECHBOX1" }}</label>
            </div>
            <br />
            <div class="ui checkbox">
                <input type="checkbox" name="example">
                <label>{{ translate "ONBOARDING_STEP1_CHECHBOX2" }}</label>
            </div>
            <br /><br />
            <div id="endStep1" class="ui right labeled icon button red dtube pos-rel right floated disabled">
                <div style="display:inline-block;padding: 0.8em 1em;">
                    {{ translate "ONBOARDING_BUTTON_NEXT" }}
                </div>
                <i class="icon angle right red" style="background:white;opacity:1;"></i>
                <i class="icon white loading spinner dsp-non" style="background-color: transparent;opacity:1;"></i>
            </div>
            
        </section>
        
        <section id="step2" style="display: none">
            <p>{{{ translate "ONBOARDING_STEP2_PART1" }}}</p>
            <p>{{ translate "ONBOARDING_STEP2_PART2" }}</p>
            <div class="ui grid">
                <div class="one column row" style="text-align: right">
                    <div class="right floated column">
                        <div id="endStep2" class="ui right labeled icon button red dtube pos-rel right floated">
                            <div style="display:inline-block;padding: 0.8em 1em;">
                                {{step2status}}
                            </div>
                            <i class="icon angle right red" style="background:white;opacity:1;"></i>
                            <i class="icon white loading spinner dsp-non" style="background-color: transparent;opacity:1;"></i>
                        </div>
                    </div>
                </div>
            </div>
           
        </section>
        <section id="step3" style="display: none">
            <p>{{ translate "ONBOARDING_STEP3_PART1" }}</p>
            <p>{{ translate "ONBOARDING_STEP3_PART2" }}</p>
            {{#if tmpSteemProfile}}
                <form class="ui large form wid-ful ">
                    <div class="ui segments">
                        <div class="ui segment" style="padding: 20px;">
                            <div class="field">
                                <label>{{ translate 'CHANNEL_ABOUT_TAB_AVATAR'}}</label>
                                <div class="ui left icon input">
                                <i class="user circle icon"></i>
                                <input type="text" id="profile_avatar" value="{{tmpSteemProfile.profile_image}}">
                                </div>
                            </div>
                            <div class="field">
                                <label>{{ translate 'CHANNEL_ABOUT_TAB_COVER'}}</label>
                                <div class="ui left icon input">
                                <i class="image icon"></i>
                                <input type="text" id="profile_cover" value="{{tmpSteemProfile.cover_image}}">
                                </div>
                            </div>
                            <div class="field">
                                <label>{{ translate 'CHANNEL_ABOUT_TAB_ABOUT'}}</label>
                                <div class="ui left icon input">
                                <i class="info icon"></i>
                                <input type="text" id="profile_about" value="{{tmpSteemProfile.about}}">
                                </div>
                            </div>
                            <div class="field">
                                <label>{{ translate 'CHANNEL_ABOUT_TAB_LOCATION'}}</label>
                                <div class="ui left icon input">
                                <i class="map marker icon"></i>
                                <input type="text" id="profile_location" value="{{tmpSteemProfile.location}}">
                                </div>
                            </div>
                            <div class="field">
                                <label>{{ translate 'CHANNEL_ABOUT_TAB_WEBSITE'}}</label>
                                <div class="ui left icon input">
                                <i class="desktop icon"></i>
                                <input type="text" id="profile_website" value="{{tmpSteemProfile.website}}">
                                </div>
                            </div>
                            <div class="field">
                                <label>{{ translate 'CHANNEL_ABOUT_TAB_STEEM_USERNAME'}}</label>
                                <div class="ui left icon input">
                                <i class="user circle icon"></i>
                                <input type="text" id="profile_steem" value="{{activeUsernameSteem}}">
                                </div>
                            </div>
                        </div>
                        <div class="ui grid">
                            <div class="one column row" style="text-align: right">
                                <div class="right floated column">
                                    <div id="endStep3" class="ui right labeled icon button red dtube pos-rel right floated">
                                        <div style="display:inline-block;padding: 0.8em 1em;">
                                            {{ translate "ONBOARDING_BUTTON_SAVE_LOGIN" }}
                                        </div>
                                        <i class="icon double angle right red" style="background:white;opacity:1;"></i>
                                        <i class="icon white loading spinner dsp-non" style="background-color: transparent;opacity:1;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            {{else}}
                <div class="ui segment">
                    <div class="ui active inverted dimmer">
                      <div class="ui text loader">{{ translate "ONBOARDING_LOADING" }}</div>
                    </div>
                    <p></p>
                </div>
            {{/if}}            
        </section>
    </div>
</template>